/*
 * @Description: 我的车票里的车票组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:50:30
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:33:35
 */
<template>
  <div
    class="ticket_main flex-h flex-hsb fontsize32"
    @click="skipToTicketInfo"
  >
    <div
      class="type"
      :style="{color: ticketColor.dayColor}"
    >
      <i class="iconfont icon-bus fontsize60"></i>
      <p class="fontsize28">次票</p>
    </div>
    <div class="info">
      <h3>嘉虹二线</h3>
      <p class="station fontsize28">公交嘉定西站&nbsp;&nbsp;➜&nbsp;&nbsp;立昂路嘉宏路站</p>
      <p class="time fontsize24">班次：2019年6月27日08:00</p>
    </div>
    <div class="broken">
      <div class="circle top"></div>
      <div class="circle bottom"></div>
    </div>
    <div
      v-if="false"
      class="tag"
    >
      <img :src="ticketTag.used">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ticket: { //  车票数据
      type: Object,
      default: null
    }
  },
  data () {
    return {
      ticketTag: { // 存储车票三种状态对应的图片
        used: require('@static/img/used.png'),
        overdue: require('@static/img/overdue.png'),
        dishonour: require('@static/img/dishonour.png')
      },
      ticketColor: { // 存储不同状态车票图标颜色
        dayColor: '#027aff',
        weekColor: '#836bff',
        monthColor: '#0ecce6'
      }
    }
  },
  methods: {
    skipToTicketInfo () { // 跳转车票信息页
      this.$router.push({ path: 'ticket' })
    }
  }
}
</script>

<style lang="scss" scoped>
.ticket_main {
  width: 686px;
  margin: 32px;
  margin-top: 0;
  background-color: #fff;
  border-radius: 4px; /*no*/
  padding: 16px 0;
  position: relative;
  .type {
    width: 134px;
    text-align: center;
    margin-top: 26px;
    i {
      height: 60px;
    }
    p {
      height: 40px;
      line-height: 40px;
    }
  }
  .info {
    width: 520px;
    padding-left: 32px;
    h3 {
      height: 44px;
      line-height: 44px;
      margin-bottom: 20px;
    }
    .station {
      height: 40px;
      line-height: 40px;
    }
    .time {
      height: 28px;
      line-height: 28px;
      margin-top: 4px;
      margin-bottom: 32px;
      color: #999;
    }
  }
  .broken {
    width: 0;
    height: 195px;
    position: absolute;
    top: 0;
    left: 133px;
    border: 2px dashed #ccc;
    .circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #f2f5f6;
      position: absolute;
      left: -17px;
    }
    .top {
      top: -20px;
    }
    .bottom {
      bottom: -20px;
    }
  }
  .tag {
    width: 100px;
    position: absolute;
    right: 0;
    top: 0;
    img {
      width: 100%;
    }
  }
}
</style>
